<template>
  <video src="../../assets/原神1.mp4" loop="loop" autoplay muted></video>
  <div class="box">
    <div class="box_name">
      <p class="loginName">{{pageInfo.title}}</p>
    </div>
    <!-- 动态组件 -->
    <component :is="pageInfo.component"></component>

  <div class="type_login">
    <p class="check" >
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="icon"></use>
      </svg>
      <b @click="checked">{{pageInfo.checkDes}}</b>
    </p>
  </div>
  </div>
</template>
  
<script  setup>
import {useUser} from "../../store/allstore"
import commonLogin from '../../components/commonLogin.vue'
import smslogin from '../../components/smslogin.vue'
import {storeToRefs} from "pinia"
import {ref,watchEffect,markRaw,computed} from "vue"

let pageInfo=ref({
  title:'staem登录系统', //标题
  loginType:'common', //登录类型 commonLogin/smslogin
  checkDes:'切换短信登录',//切换的描述信息
  component:smslogin //要切换的组件
})
// 用于标记是否常规登录
let isCommonLogin=ref(true)
// 点击切换登录方式
let checked=()=>{
  isCommonLogin.value=!isCommonLogin.value
}
// 通过结合高级侦听器和vue3的动态组件来实现组件切换
// vue3的动态组件,通过:is结合 component这个组件来实现动态切换

watchEffect(()=>{
  // 常规登录切换短信登录
  if(!isCommonLogin.value){
    pageInfo.value={
  title:'短信登录', //标题
  loginType:'smslogin', //登录类型 commonLogin/smslogin
  checkDes:'切换短信登录',//切换的描述信息
  component:markRaw(smslogin) //要切换的组件
}
  }else{
    //短信登录切换常规登录
    if(isCommonLogin.value){
    pageInfo.value={
  title:'staem登录系统', //标题
  loginType:'common', //登录类型 commonLogin/smslogin
  checkDes:'切换账号密码登录',//切换的描述信息
  component:markRaw(commonLogin) //要切换的组件
}
  }}
})
// 根据登录模式的切换,派发图标的名称
let icon =computed(()=>{
  return isCommonLogin.value?'#icon-shouji':'#icon-kujialeqiyezhan_zhanghaoguanli'
})
</script>
<style lang="scss" scoped>

.box {
  width: 400px;
  height: 413px;
  border: 2px solid black;
  position: fixed;
  top: 25%;
  right: 10%;
  border-radius: 5px;
  // display:flex;
  // flex-direction: column;
  // justify-content: space-between;
  // align-items: center;
  padding: 60px 0 80px 0;
  background-color: rgba(210, 76, 210, 0.4);
}
video {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -999999;
}
.box_name {
  height: 100px;
}
.loginName {
  font-size: 32px;
  font-weight: 700;
  text-align: center;

  color: white;
}
.type_login {
  margin-top: 20px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-content: center;

  .check {
    font-size: 18px;
    color: white;
    cursor: pointer;
    text-decoration:underline;
  }
}


    .loginName {
  font-size: 32px;
  font-weight: 700;
  text-align: center;

  color: white;
}
b{
  margin-left: 20px;
  font-size: 18px;
}
</style>
  